<template>
  <div class="login">
    <div class="return" @click="tohome"><van-icon name="cross" /></div>
    <h1>OMINI.cn</h1>
    <van-form @submit="onSubmit">
      <van-field
        style="background-color: transparent"
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        style="background-color: transparent"
        v-model="userpwd"
        type="password"
        name="userpwd"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button
          class="btn-login"
          style="background-color: #c1ab96; border: none"
          round
          block
          type="info"
          native-type="submit"
          >登录</van-button
        >
      </div>
      <div style="margin: 16px">
        <van-button
          class="btn-register"
          style="background-color: #c1ab96; border: none"
          round
          block
          type="info"
          native-type="submit"
          @click="toregister"
          >没有账号?前往注册</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<style >
.login {
  background-image: url("https://www.pmdaniu.com/storages/101027/ba18b5f48ada3273e098f37e8715880e-30118/images/启动页/u504.png");
  background-size: 100vw 100vh;
  height: 100vh;
  background-color: #675a53;
  overflow: hidden;
  padding: 30px;
}
.return {
  text-align: center;
  font-size: 16px;
  width: 25px;
  height: 25px;
  background-color: #c1ab96;
  border-radius: 99px;
  position: absolute;
  top: 40px;
  right: 20px;
}
.return .van-icon {
  line-height: 25px;
  text-align: center;
}
.login h1 {
  font-weight: 700;
  font-size: 30px;
  text-align: left;
  color: white;
  margin-top: 50px;
}
.van-form {
  margin-top: 50px;
}
.van-form * {
  color: white;
}
.van-field {
  margin-top: 20px;
}
.btn-login {
  margin-top: 40px;
}
.btn-register {
  margin-top: 20px;
}
</style>
<script>
import userModel from "../model/userModel";
export default {
  data() {
    return {
      username: "",
      userpwd: "",
    };
  },
  methods: {
    tohome() {
      this.$router.history.push("/");
    },
    toregister() {
      this.$router.history.push("/register");
    },
    onSubmit(info) {
      userModel.query({ username: info.username }).then((res) => {
        if (res.data.length) {
          if (res.data[0].userpwd == info.userpwd) {
            this.$toast.success("登录成功");
            localStorage.setItem("username", this.username);
            this.$router.history.push("/mine");
          } else {
            this.$toast.fail("密码错误");
          }
        } else {
          this.$toast.fail("该账号不存在");
        }
      });
    },
  },
  created() {
    this.$store.commit("changeNavFlag", false);
  },
  beforeDestroy() {
    this.$store.commit("changeNavFlag", true);
  },
};
</script>